<template>
  <div style="padding: 50px; width: 600px">
    <div style="height: 1000px">height:1000px</div>
    <!-- 用useIntersectionObjserver来观察 target在不在可视范围 -->
    <div id="target" style="height: 300px; text-align: center; border: 3px solid #ccc">目标</div>
    <div style="height: 1000px">height:1000px</div>
  </div>
</template>
<script>
// 1. 从vueuse导入
import { useIntersectionObserver } from '@vueuse/core'
export default {
  mounted() {
    // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
    // 2. target 是观察的目标容器 dom对象 | 组件对象
    // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出

    // const { stop } = useIntersectionObserver(
    //   target, // target 是vue的对象引用。是观察的目标
    //   // isIntersecting 是否进入可视区域，true是进入 false是移出
    //   // observerElement 被观察的dom
    //   ([{ isIntersecting }], observerElement) => {
    //     // 在此处可根据isIntersecting来判断，然后做业务
    //   },
    // )

    const target = document.querySelector('#target') // 要观察的目标
    // useIntersectionObserver有三个参数
    // 参数1： 要观察的目标
    // 参数2:  回调函数（执行时机是目标的可见状态发生变化时）。第一个参数是数组[它可以监视多个元素，所以是数组]，每个元素是对象。
    //         对象有个属性：isIntersecting，通过这个值可以知道当前对象是处于可见区域
    // 参数3:  {threshold: } threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
    //           默认是0.1。 值越大表示观察越不灵敏
    // useIntersectionObserver返回一个对象，其中有一个stop属性。调用了stop之后，就会停止观察
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        console.log(target, isIntersecting)
        // 如果从不可见 -》可见就停止观察
        if (isIntersecting) {
          stop() // 调用了stop之后，就会停止观察
        }
      },
      // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
      //           默认是0.1。 值越大表示观察越不灵敏
      { threshold: 0.1 }
    )
  }
}
</script>
